<!DOCTYPE html>
<html>

<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>INSPINIA | Dashboard v.3</title>

<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="font-awesome/css/font-awesome.css" rel="stylesheet">

<!-- Morris -->
<link href="css/plugins/morris/morris-0.4.3.min.css" rel="stylesheet">

<link href="css/animate.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">

<style type="text/css">
#widthChart {
	width: 930px;
}
</style>

</head>

<body class="fixed-navigation">
	<div id="wrapper">
		<!-- 사이드 메뉴바 -->
		<nav class="navbar-default navbar-static-side" role="navigation">
			<div class="sidebar-collapse">
				<ul class="nav" id="side-menu">
					<li class="nav-header">
						<div class="dropdown profile-element">
							<span> <img alt="image" class="img-circle"
								src="img/profile_small.jpg" />
							</span> <a data-toggle="dropdown" class="dropdown-toggle" href="#">
								<span class="clear"> <span class="block m-t-xs"> <strong
										class="font-bold">bingbingbing</strong>
								</span> <span class="text-muted text-xs block">Worker <b
										class="caret"></b></span>
							</span>
							</a>
							<ul class="dropdown-menu animated fadeInRight m-t-xs">
								<li><a href="profile.html">Profile</a></li>
								<li><a href="contacts.html">Contacts</a></li>
								<li><a href="mailbox.html">Mailbox</a></li>
								<li class="divider"></li>
								<li><a href="login.html">Logout</a></li>
							</ul>
						</div>
					</li>

					<!-- 메뉴 리스트 -->
					<li class="active"><a href="#"><i
							class="fa fa-bar-chart-o"></i> <span class="nav-label">현재
								상태 통계</span></a></li>
					<li><a href="Astepup_rank.html"><i class="fa fa-flask"></i> <span
							class="nav-label">순위 리스트</span></a></li>
					<li><a href="Astepup_badge.html"><i class="fa fa-desktop"></i> <span
							class="nav-label">뱃지</span></a></li>
					<li><a href="Astepup_mission.html"><i class="fa fa-envelope"></i> <span
							class="nav-label">미션</span></a></li>
					<li><a href="Astepup_temp.html"><i class="fa fa-sitemap"></i> <span
							class="nav-label">온도계</span></a></li>
				</ul>
			</div>
		</nav>

		<div id="page-wrapper" class="gray-bg">
			<!-- 상단 검색 및 로그아웃 메뉴 -->
			<div class="row border-bottom">
				<nav class="navbar navbar-static-top white-bg" role="navigation"
					style="margin-bottom: 0">
					<div class="navbar-header">
						<a class="navbar-minimalize minimalize-styl-2 btn btn-primary "
							href="#"><i class="fa fa-bars"></i> </a>
						<form role="search" class="navbar-form-custom" method="post"
							action="search_results.html">
							<div class="form-group">
								<input type="text" placeholder="Search for something..."
									class="form-control" name="top-search" id="top-search">
							</div>
						</form>
					</div>
					<ul class="nav navbar-top-links navbar-right">
						<li><span class="m-r-sm text-muted welcome-message">Welcome
								to INSPINIA+ Admin Theme.</span></li>
						<li class="dropdown"><a class="dropdown-toggle count-info"
							data-toggle="dropdown" href="#"> <i class="fa fa-envelope"></i>
								<span class="label label-warning">16</span>
						</a>
							<ul class="dropdown-menu dropdown-messages">
								<li>
									<div class="dropdown-messages-box">
										<a href="profile.html" class="pull-left"> <img alt="image"
											class="img-circle" src="img/a7.jpg">
										</a>
										<div>
											<small class="pull-right">46h ago</small> <strong>Mike
												Loreipsum</strong> started following <strong>Monica Smith</strong>. <br>
											<small class="text-muted">3 days ago at 7:58 pm -
												10.06.2014</small>
										</div>
									</div>
								</li>
							</ul></li>
						<li class="dropdown"><a class="dropdown-toggle count-info"
							data-toggle="dropdown" href="#"> <i class="fa fa-bell"></i> <span
								class="label label-primary">8</span>
						</a>
							<ul class="dropdown-menu dropdown-alerts">
								<li><a href="mailbox.html">
										<div>
											<i class="fa fa-envelope fa-fw"></i> You have 16 messages <span
												class="pull-right text-muted small">4 minutes ago</span>
										</div>
								</a></li>
								<li>
									<div class="text-center link-block">
										<a href="notifications.html"> <strong>See All
												Alerts</strong> <i class="fa fa-angle-right"></i>
										</a>
									</div>
								</li>
							</ul></li>

						<!-- 로그아웃 버튼 -->
						<li><a href="login.html"> <i class="fa fa-sign-out"></i>
								Log out
						</a></li>
					</ul>
				</nav>
			</div>

			<!-- 차트 시작 -->
			<div class="wrapper wrapper-content animated fadeInRight">
				<div class="row">
					<div class="col-lg-12">
						<div class="ibox float-e-margins">
							<div class="ibox-content">
								<div>
									<h1 class="m-b-xs">January : 36steps</h1>
									<h3 class="font-bold no-margins">steps of Month</h3>
								</div>

								<div>
									<canvas id="lineChart" height="70"></canvas>
								</div>

								<div class="m-t-md">
									<small class="pull-right"> <i class="fa fa-clock-o">
									</i> Update on 08.01.2015
									</small> <small> <strong>steps of Month:</strong> 월별 걸어 올라간 계단의
										수를 보여줍니다.
									</small>
								</div>

							</div>
						</div>
					</div>
				</div>


				<div class="row">
					<div class="col-lg-4">
						<div class="ibox float-e-margins">
							<div class="ibox-title">
								<span class="label label-primary pull-right">Today</span>
								<h5>01월 08일</h5>
							</div>
							<div class="ibox-content">
								<h1 class="no-margins">16 Steps</h1>
								<div class="stat-percent font-bold text-navy">
									63Kcal <i class="fa fa-level-up"></i>
								</div>
								<small>New orders</small>
							</div>
						</div>
					</div>
					<div class="col-lg-4">
						<div class="ibox float-e-margins">
							<div class="ibox-title">
								<span class="label label-info pull-right">Monthly</span>
								<h5>1월</h5>
							</div>
							<div class="ibox-content">
								<h1 class="no-margins">63 Stpes</h1>
								<div class="stat-percent font-bold text-info">
									863Kcal <i class="fa fa-level-up"></i>
								</div>
								<small>New orders</small>
							</div>
						</div>
					</div>
					<div class="col-lg-4">
						<div class="ibox float-e-margins">
							<div class="ibox-title">
								<span class="label label-warning pull-right">Annual</span>
								<h5>2015년</h5>
							</div>
							<div class="ibox-content">
								<h1 class="no-margins">384 Steps</h1>
								<div class="stat-percent font-bold text-warning">
									3463Kcal <i class="fa fa-level-up"></i>
								</div>
								<small>New orders</small>
							</div>
						</div>
					</div>
				</div>
				<div class="row">
					<div class="col-lg-6">
						<div class="ibox float-e-margins">
							<div class="ibox-title">
								<h5>부서별 순위</h5>
								<div ibox-tools></div>
							</div>
							<div class="ibox-content">
								<div>
									<canvas id="doughnutChart" height="140"></canvas>
								</div>
							</div>
						</div>
					</div>
					<div class="col-lg-6">
						<div class="ibox float-e-margins">
							<div class="ibox-title">
								<h5>개인별 순위</h5>
								<div class="ibox-tools">
									<a class="collapse-link"> <i class="fa fa-chevron-up"></i>
									</a> <a class="dropdown-toggle" data-toggle="dropdown" href="#">
										<i class="fa fa-wrench"></i>
									</a>
									<ul class="dropdown-menu dropdown-user">
										<li><a href="#">Config option 1</a></li>
										<li><a href="#">Config option 2</a></li>
									</ul>
									<a class="close-link"> <i class="fa fa-times"></i>
									</a>
								</div>
							</div>
							<div class="ibox-content">

								<table class="table">
									<thead>
										<tr>
											<th>#</th>
											<th>First Name</th>
											<th>Last Name</th>
											<th>Username</th>
										</tr>
									</thead>
									<tbody>
										<tr>
											<td>1</td>
											<td>Mark</td>
											<td>Otto</td>
											<td>@mdo</td>
										</tr>
										<tr>
											<td>2</td>
											<td>Jacob</td>
											<td>Thornton</td>
											<td>@fat</td>
										</tr>
										<tr>
											<td>3</td>
											<td>Larry</td>
											<td>the Bird</td>
											<td>@twitter</td>
										</tr>
										<tr>
											<td>4</td>
											<td>Did</td>
											<td>the Dog</td>
											<td>@facebook</td>
										</tr>
										<tr>
											<td>5</td>
											<td>Larry</td>
											<td>the Cat</td>
											<td>@instagram</td>
										</tr>
									</tbody>
								</table>

							</div>
						</div>
					</div>
				</div>
				<div class="row">
					<div class="col-lg-4">
						<div class="ibox float-e-margins">
							<div class="ibox-title">
								<span class="label label-primary pull-right">Mission1</span>
								<h5>Mission1</h5>
							</div>
							<div class="ibox-content">
								<h1 class="no-margins">Mission Contents</h1>
								<div class="stat-percent font-bold text-navy">
									63Kcal <i class="fa fa-level-up"></i>
								</div>
								<small>New orders</small>
							</div>
						</div>
					</div>
					<div class="col-lg-4">
						<div class="ibox float-e-margins">
							<div class="ibox-title">
								<span class="label label-info pull-right">Mission2</span>
								<h5>Mission2</h5>
							</div>
							<div class="ibox-content">
								<h1 class="no-margins">Mission Contents</h1>
								<div class="stat-percent font-bold text-info">
									863Kcal <i class="fa fa-level-up"></i>
								</div>
								<small>New orders</small>
							</div>
						</div>
					</div>
					<div class="col-lg-4">
						<div class="ibox float-e-margins">
							<div class="ibox-title">
								<span class="label label-warning pull-right">Mission3</span>
								<h5>Mission3</h5>
							</div>
							<div class="ibox-content">
								<h1 class="no-margins">Mission Contents</h1>
								<div class="stat-percent font-bold text-warning">
									3463Kcal <i class="fa fa-level-up"></i>
								</div>
								<small>New orders</small>
							</div>
						</div>
					</div>
				</div>
		</div>
		<!-- Footer 부분 -->
		<div class="footer">
			<div class="pull-right">
				10GB of <strong>250GB</strong> Free.
			</div>
			<div>
				<strong>Copyright</strong> Example Company &copy; 2014-2015
			</div>
		</div>

	</div>
	</div>

	<!-- Mainly scripts -->
	<script src="js/jquery-2.1.1.js"></script>
	<script src="js/bootstrap.min.js"></script>
	<script src="js/plugins/metisMenu/jquery.metisMenu.js"></script>
	<script src="js/plugins/slimscroll/jquery.slimscroll.min.js"></script>

	<!-- Flot -->
	<script src="js/plugins/flot/jquery.flot.js"></script>
	<script src="js/plugins/flot/jquery.flot.tooltip.min.js"></script>
	<script src="js/plugins/flot/jquery.flot.spline.js"></script>
	<script src="js/plugins/flot/jquery.flot.resize.js"></script>
	<script src="js/plugins/flot/jquery.flot.pie.js"></script>
	<script src="js/plugins/flot/jquery.flot.symbol.js"></script>
	<script src="js/plugins/flot/curvedLines.js"></script>

	<!-- Peity -->
	<script src="js/plugins/peity/jquery.peity.min.js"></script>
	<script src="js/demo/peity-demo.js"></script>

	<!-- Custom and plugin javascript -->
	<script src="js/inspinia.js"></script>
	<script src="js/plugins/pace/pace.min.js"></script>

	<!-- jQuery UI -->
	<script src="js/plugins/jquery-ui/jquery-ui.min.js"></script>

	<!-- Jvectormap -->
	<script src="js/plugins/jvectormap/jquery-jvectormap-1.2.2.min.js"></script>
	<script src="js/plugins/jvectormap/jquery-jvectormap-world-mill-en.js"></script>

	<!-- Sparkline -->
	<script src="js/plugins/sparkline/jquery.sparkline.min.js"></script>

	<!-- Sparkline demo data  -->
	<script src="js/demo/sparkline-demo.js"></script>

	<!-- ChartJS-->
	<script src="js/plugins/chartJs/Chart.min.js"></script>
	<!-- 
	<script src="js/demo/chartjs-demo.js"></script>
 -->
	<script>
		$(document)
				.ready(
						function() {

							var lineData = {
								labels : [ "January", "February", "March",
										"April", "May", "June", "July",
										"August", "September", "October",
										"Nobember", "December" ],
								datasets : [
										{
											label : "Example dataset",
											fillColor : "rgba(220,220,220,0.5)",
											strokeColor : "rgba(220,220,220,1)",
											pointColor : "rgba(220,220,220,1)",
											pointStrokeColor : "#fff",
											pointHighlightFill : "#fff",
											pointHighlightStroke : "rgba(220,220,220,1)",
											data : [ 65, 59, 80, 81, 56, 55,
													40, 32, 58, 67, 78, 48 ]
										},
										{
											label : "Example dataset",
											fillColor : "rgba(26,179,148,0.5)",
											strokeColor : "rgba(26,179,148,0.7)",
											pointColor : "rgba(26,179,148,1)",
											pointStrokeColor : "#fff",
											pointHighlightFill : "#fff",
											pointHighlightStroke : "rgba(26,179,148,1)",
											data : [ 28, 48, 40, 19, 86, 27,
													90, 54, 37, 48, 69, 85 ]
										} ]
							};

							var lineOptions = {
								scaleShowGridLines : true,
								scaleGridLineColor : "rgba(0,0,0,.05)",
								scaleGridLineWidth : 1,
								bezierCurve : true,
								bezierCurveTension : 0.4,
								pointDot : true,
								pointDotRadius : 4,
								pointDotStrokeWidth : 1,
								pointHitDetectionRadius : 20,
								datasetStroke : true,
								datasetStrokeWidth : 2,
								datasetFill : true,
								responsive : true,
							};

							var ctx = document.getElementById("lineChart")
									.getContext("2d");
							var myNewChart = new Chart(ctx).Line(lineData,
									lineOptions);

							
							
							var doughnutData = [ {
								value : 300,
								color : "#a3e1d4",
								highlight : "#1ab394",
								label : "App"
							}, {
								value : 50,
								color : "#dedede",
								highlight : "#1ab394",
								label : "Software"
							}, {
								value : 100,
								color : "#b5b8cf",
								highlight : "#1ab394",
								label : "Laptop"
							} ];

							var doughnutOptions = {
								segmentShowStroke : true,
								segmentStrokeColor : "#fff",
								segmentStrokeWidth : 2,
								percentageInnerCutout : 45, // This is 0 for Pie charts
								animationSteps : 100,
								animationEasing : "easeOutBounce",
								animateRotate : true,
								animateScale : false,
								responsive : true,
							};

							var ctx = document.getElementById("doughnutChart")
									.getContext("2d");
							var myNewChart = new Chart(ctx).Doughnut(
									doughnutData, doughnutOptions);

						});
	</script>

</body>
</html>
